import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
    NavBar,
    WingBlank,
    List,
    InputItem,
    WhiteSpace,
    Radio,
    Button,
    Toast
} from 'antd-mobile'
import { createForm } from 'rc-form'
import { Redirect } from 'react-router-dom'

import Logo from '../../compoments/logo/logo'
import { register } from '../../redux/action'


class Register extends Component{

    state = {
        username:'',
        password:'',
        confirmPwd:'',
        userType:'jobSeeker'
    }

    handleChange = (userType,val) => {
        this.setState({
            [userType]:val
        })
    }

    register = () =>{
        this.props.form.validateFields((error, value) => {
            if(error){
                if (error.username){
                    Toast.fail(error.username.errors[0].message, 1);
                }else if (error.password){
                    Toast.fail(error.password.errors[0].message, 1)
                }else if (error.confirmPwd){
                    Toast.fail(error.confirmPwd.errors[0].message, 1)
                }
            }else {
                const { password, confirmPwd} = value
                if (password !== confirmPwd){
                    Toast.fail('两次密码不正确', 1)
                }else {
                    this.setState(value, ()=>{
                        this.props.register( this.state )
                    })
                }
            }
        })
    }

    toLogin = () =>{
        this.props.history.replace('/login')
    }


    render() {
        let errors
        const { getFieldProps, getFieldError } = this.props.form
        const { redirectTo } = this.props.user
        if (redirectTo) {
            return <Redirect to={redirectTo}/>
        }
        return(
            <div>
                <NavBar>&nbsp;直&nbsp;聘&nbsp;项&nbsp;目&nbsp;</NavBar>
                <Logo />
                <WingBlank size="lg">
                    <List>
                        <InputItem
                            placeholder='请输入用户名'
                            {...getFieldProps('username',{
                                rules:[
                                    { required: true, whitespace:true, message: '请输入用户名' },
                                    { min: 4, message: '用户名至少4位' },
                                    { max: 12, message: '用户名最多12位' },
                                ]
                            })}
                        >用户名：</InputItem>
                        <WhiteSpace />
                        <InputItem
                            type='password'
                            placeholder='请输入密码'
                            {...getFieldProps('password',{
                                rules:[
                                    { required: true, whitespace:true, message: '请输入密码' },
                                    { min: 4, message: '密码至少4位' },
                                    { max: 12, message: '密码最多12位' },
                                ]
                            })}
                        >密&nbsp;&nbsp;&nbsp;码：</InputItem>
                        <WhiteSpace/>
                        <InputItem
                            type='password'
                            placeholder='请确认密码'
                            {...getFieldProps('confirmPwd',{
                                rules:[
                                    { required: true, whitespace:true, message: '请再次输入密码' },
                                    { min: 4, message: '两次密码不正确' },
                                    { max: 12, message: '两次密码不正确' },
                                ]
                            })}
                        >确认密码：</InputItem>
                        <WhiteSpace/>
                        <List.Item>
                            <span>用户类型</span>&nbsp;&nbsp;&nbsp;&nbsp;
                            <Radio
                                checked={this.state.userType === 'jobSeeker'}
                                onChange={() =>{this.handleChange('userType','jobSeeker')}}
                            >大神</Radio>&nbsp;&nbsp;&nbsp;&nbsp;
                            <Radio
                                checked={this.state.userType === 'boss'}
                                onChange={() =>{this.handleChange('userType','boss')}}
                            >老板</Radio>
                        </List.Item>
                        <WhiteSpace/>
                        <Button type='primary' onClick={this.register}> 注册 </Button>
                        <WhiteSpace/>
                        <Button  onClick={this.toLogin}> 已有帐号 </Button>
                        {(errors = getFieldError('required')) ? errors.join(',') : null}
                    </List>
                </WingBlank>
            </div>
        )
    }
}

export default connect(
    state =>({ user:state.user }),
    { register }
)(createForm()(Register))

